<script setup>
import {ref} from 'vue'

const weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDays = ref([
  {
    name: weeks[0],
    data: ''
  },
  {
    name: weeks[1],
    data: ''
  },
  {
    name: weeks[2],
    data: ''
  },
  {
    name: weeks[3],
    data: ''
  },
  {
    name: weeks[4],
    data: ''
  },
  {
    name: weeks[5],
    data: ''
  },
  {
    name: weeks[6],
    data: ''
  },
]);
const setSelectWeeks = () => {
  const DATE = new Date()
  const weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

  const data = ref(DATE.getDate());
  weekDays.value = weekDays.value.slice(DATE.getDay(), weekDays.value.length)
  // weekDays.value[DATE.getDay()-1].name = '今天'
  // weekDays.value[DATE.getDay()].name = '明天'
  for (const v of weekDays.value) {
    v.data = `${String(DATE.getMonth()).padStart(2, '0')}-${String(data.value).padStart(2, '0')}`
    data.value++
  }
  if (weekDays.value.length > 6) weekDays.value = weekDays.value.slice(0, 6)
  let nameIndex = 0
  while (weekDays.value.length < 6) {
    const prev = weekDays.value[weekDays.value.length - 1]
    const day = Number(prev.data.split('-')[1])
    const month = prev.data.split('-')[0]
    weekDays.value.push({
      name: weeks[nameIndex],
      data: `${month}-${String(day + 1).padStart(2, '0')}`
    })
    nameIndex++
  }
}
setSelectWeeks()
const selectWeekday = ref(0)
const product = ref([
  {
    name: '共享自习室',
    path: '/pages/product/kitchen',
    // path: '/pages/product/study',
    background: '#F97D3F'
  },
  {
    name: '共享打印机',
    path: '/pages/product/kitchen',
    // path: '/pages/product/printers',
    background: '#96C625'
  },
  {
    name: '共享咖啡吧',
    path: '/pages/product/kitchen',
    // path: '/pages/product/coffee',
    background: '#D9DA02'
  },
  {
    name: '共享厨房',
    path: '/pages/product/kitchen',
    background: '#4086F5'
  },
  {
    name: '预约医务室',
    path: '/pages/product/kitchen',
    // path: '/pages/product/infirmary',
    background: '#96C625'
  },
  {
    name: '预约健身房',
    path: '/pages/product/kitchen',
    // path: '/pages/product/gym',
    background: '#D9DA02'
  },
  {
    name: '教室预约',
    path: '/pages/product/kitchen',
    // path: '/pages/product/classroom',
    background: '#4086F5'
  },
  {
    name: '洗衣机预约',
    path: '/pages/product/kitchen',
    // path: '/pages/product/washer',
    background: '#F97D3F'
  }
])
const naviGateTo = url => {
  uni.navigateTo({url: `${url}?day=${weeks[selectWeekday.value]}`})
}
</script>

<template>
  <view class="container content">
    <view class="weekDays">
      <view
          v-for="(weekDay, i) in weekDays"
          :class="{'active':i===selectWeekday}"
          class="weekDay link"
          @click="selectWeekday=i">
        <view class="week">{{ weekDay.name }}</view>
        <view class="day">{{ weekDay.data }}</view>
      </view>
    </view>
    <view class="product">
      <view v-for="(item, i) in product" :key="i" :style="{background: item.background}" class="item link"
            @click="naviGateTo(item.path)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container > .weekDays {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  width: 100%;
  height: 60px;
}

.container > .weekDays > .weekDay {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #e8ebf1;
  border-radius: 10px;
  font-size: 13px;
  padding: 6px;
}

.active {
  outline: 2px solid #4ab3d2;
}

.product {
  width: 100%;
  height: 100%;
}

.product > .item {
  width: 100%;
  height: 75px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  padding: 10px;
  font-size: 18px;
  color: white;
}
</style>